@extends('layouts.userctl')
@section('content')
<style>
	.formpage {
		width: 800px;
		height: auto;
		margin: 10px auto;
	}

	.layui-form-label {
		width: 150px;
	}

	.layui-input-block {
		margin-left: 150px;
	}

	.needed {
		color: #e62828;
	}

	.layui-form-item .layui-input-inline {
		width: 152px;
	}

	.mainpeo {
		flex: 1;
		margin-right: 10px;
	}

	.lastright {
		margin-right: 0 !important;
	}

	.uploading1 {
		display: none;
	}

	.uploading2 {
		display: none;
	}

	.delrow {
		font-size: 34px;
		color: #F0280F;
	}
	.delrow:hover {
		background-color: #EEEEEE;
	}
</style>
<div class="formpage">
	<form class="layui-form" action="{{route('admin.department.addstreetuser',array('type_id'=>$type))}}" method="post"
		onkeypress="return event.keyCode != 13;">
		{{csrf_field()}}
		<div class="layui-form-item">
			<label class="layui-form-label">人员姓名 <span class="needed"></span></label>
			<div class="layui-input-block">
				<input type="text" lay-verify="required" name="name" placeholder="请输入人员名称" class="layui-input" value="">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">@if($type == 2) 所属社区 @else 所属街道 @endif</label>
			<div class="layui-input-block" style="display: flex;flex-direction: row;">
				<div class="layui-input-inline" style="flex: 1;">
					<select name="province" lay-filter="provincediv" id="provincediv" lay-search disabled="disabled">
						<option value="">请选择省份</option>
						@foreach($provinces as $p)
						<option value="{{$p['id']}}">{{$p['name']}}</option>
						@endforeach
					</select>
				</div>
				<div class="layui-input-inline" style="flex: 1;">
					<select name="city" lay-filter="citydiv" id="citydiv" lay-search disabled="disabled">
						<option value="">请选择市</option>
						@foreach($citys as $p)
						<option value="{{$p['id']}}">{{$p['name']}}</option>
						@endforeach
					</select>
				</div>
				<div class="layui-input-inline" style="flex: 1;">
					<select name="district" lay-filter="districtdiv" id="districtdiv" lay-search disabled="disabled">
						<option value="">请选择县/区</option>
						@foreach($districts as $p)
						<option value="{{$p['id']}}">{{$p['name']}}</option>
						@endforeach
					</select>
				</div>
				<div class="layui-input-inline" style="flex: 1.5;margin-right: 0;">
					<select name="street" lay-filter="streetdiv" id="streetdiv" lay-search disabled="disabled">
						<option value="">请选择镇/街道</option>
						@foreach($streets as $p)
						<option value="{{$p['id']}}">{{$p['name']}}</option>
						@endforeach
					</select>
				</div>
			</div>
		</div>

		@if($type == 2)
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-block">
				<select name="community" lay-filter="communitydiv" id="communitydiv" lay-search >
					<option value="">请选择社区</option>
					@foreach($communitys as $p)
					<option value="{{$p['id']}}">{{$p['name']}}</option>
					@endforeach
				</select>
			</div>
		</div>
		@endif
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
				<a href="{{ url()->previous() }}" class="layui-btn layui-btn-primary">返 回</a>
			</div>
		</div>
	</form>
</div>
<script>
	layui.use('form', function() {
		var form = layui.form
	var $ = layui.jquery,
			upload = layui.upload,
			element = layui.element,
			layer = layui.layer

	var province_code = 370000,
			city_code = 370200,
			district_code = 370212,
			street_code=370212004
		$('#provincediv').val(province_code)
		$('#citydiv').val(city_code)
		$('#districtdiv').val(district_code)
		$('#streetdiv').val(street_code)
		var role = '{{$role}}'
		var type = '{{$type}}'
		form.render('select')
		//======================2级菜单===================
		form.on('select(provincediv)', function(data) {
			var name = data.elem.selectedOptions[0].text
			var code = data.value
			var s = '<option value="">请选择市</option>'
			if (name == '') {
				$('#citydiv').html(s)
				form.render('select')
			} else {
				$.ajax({
					type: 'POST', //提交方式
					headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
					data: { lvl: 2, code },
					url: '/admin/area/getjson',
					success: function(result) {
						var list = result.data
						$.each(list, function(i, arr) {
							s = s + '<option value="' + arr.id + '">' +
								arr.name + '</option>'
						})
						$('#citydiv').html(s)
						form.render('select')
					}
				})
			}
			$('#districtdiv').html('<option value="">请选择县/区</option>')
			$('#streetdiv').html('<option value="">请选择镇/街道</option>')
			$('#communitydiv').html('<option value="">请选择社区</option>')
			$('#griddiv').html('<option value="">请选择网格</option>')
			form.render('select')
		})

		//======================3级菜单===================
		form.on('select(citydiv)', function(data) {
			var name = data.elem.selectedOptions[0].text
			var code = data.value
			var s = '<option value="">请选择县/区</option>'
			if (name == '') {
				$('#districtdiv').html(s)
				form.render('select')
			} else {
				$.ajax({
					type: 'POST', //提交方式
					headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
					data: { lvl: 3, code },
					url: '/admin/area/getjson',
					success: function(result) {
						var list = result.data
						// console.log(result);
						$.each(list, function(i, arr) {
							s = s + '<option value="' + arr.id + '">' +
								arr.name + '</option>'
						})
						$('#districtdiv').html(s)
						form.render('select')
					}
				})
			}
			$('#streetdiv').html('<option value="">请选择镇/街道</option>')
			$('#communitydiv').html('<option value="">请选择社区</option>')
			$('#griddiv').html('<option value="">请选择网格</option>')
			form.render('select')
		})

		//======================4级菜单===================
		form.on('select(districtdiv)', function(data) {
			var name = data.elem.selectedOptions[0].text
			var code = data.value
			var s = '<option value="">请选择镇/街道</option>'
			if (name == '') {
				$('#streetdiv').html(s)
				form.render('select')
			} else {
				$.ajax({
					type: 'POST', //提交方式
					headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
					data: { lvl: 4, code },
					url: '/admin/area/getjson',
					success: function(result) {
						var list = result.data
						$.each(list, function(i, arr) {
							s = s + '<option value="' + arr.id + '">' +
								arr.name + '</option>'
						})
						$('#streetdiv').html(s)
						form.render('select')
					}
				})
			}
			$('#communitydiv').html('<option value="">请选择社区</option>')
			$('#griddiv').html('<option value="">请选择网格</option>')
			form.render('select')
		})
		//======================5级菜单===================
		form.on('select(streetdiv)', function(data) {
			var name = data.elem.selectedOptions[0].text
			var code = data.value
			var s = '<option value="">请选择社区</option>'
			if (name == '') {
				$('#communitydiv').html(s)
				form.render('select')
			} else {
				$.ajax({
					type: 'POST', //提交方式
					headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
					data: { lvl: 5, code },
					url: '/admin/area/getjson',
					success: function(result) {
						var list = result.data
						$.each(list, function(i, arr) {
							s = s + '<option value="' + arr.id + '">' +
								arr.name + '</option>'
						})
						$('#communitydiv').html(s)
						form.render('select')
					}
				})
			}
			$('#griddiv').html('<option value="">请选择网格</option>')
			form.render('select')
		})
		//======================6级菜单===================
		form.on('select(communitydiv)', function(data) {
			var name = data.elem.selectedOptions[0].text
			var code = data.value
			var s = '<option value="">请选择网格</option>'
			if (name == '') {
				$('#griddiv').html(s)
				form.render('select')
			} else {
				$.ajax({
					type: 'POST', //提交方式
					headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
					data: { code },
					url: '/admin/area/getgridjson',
					success: function(result) {
						var list = result.data
						$.each(list, function(i, arr) {
							s = s + '<option value="' + arr.id + '">' +
								arr.name + '</option>'
						})
						$('#griddiv').html(s)
						form.render('select')
					}
				})
			}
		})
		$('#backpage').click(function() {
			history.back(-1)
		})
		//监听提交
		form.on('submit(formDemo)', function(data) {
			var index = layer.load(0, { shade: false })
			$('form').find('input,select').removeAttr('disabled')
		})
	})
</script>

@endsection
